<template>
  <div>
    <div
      class="center"
      v-loading="listArr.length > 0 ? false : true"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgb(247 247 247 / 80%)"
      :style="{ height: listArr.length ? 'auto' : '800px' }"
      v-if="listArr.length > 0"
    >
      <div v-for="item in listArr" :key="item.id">
        <div class="centerTop">
          <span>下单时间：{{ item.createTime }}</span>
          <span>订单编号：{{ item.id }}</span>
          <span class="down-time" v-if="item.orderState == 1">
            <i class="iconfont icon-shizhong"></i>
            <b>付款截止：{{ item.payLatestTime }}</b>
          </span>
          <span class="down-time" v-else @click="dele(item.skus)">删除</span>
        </div>
        <div class="centerBody">
          <ul>
            <li v-for="a in item.skus" :key="a.id">
              <img :src="a.image" alt="" />
              <div class="info">
                <p>{{ a.name }}</p>
                <p>{{ a.attrsText }}</p>
              </div>
              <div class="moneyBox">￥{{ a.curPrice }}</div>
              <div class="numBox">{{ a.quantity }}</div>
            </li>
          </ul>
          <div class="column state">
            {{
              item.orderState == 1
                ? "待付款"
                : item.orderState == 2
                ? "待发货"
                : item.orderState == 3
                ? "待收货"
                : item.orderState == 4
                ? "待评价"
                : item.orderState == 5
                ? "已完成"
                : item.orderState == 6
                ? "已取消"
                : "全部"
            }}
          </div>
          <div class="column amount">
            <p>￥{{ item.totalMoney }}</p>
            <p>(含运费：￥5)</p>
            <p>在线支付</p>
          </div>
          <div class="column action">
            <div v-if="item.orderState == 1">
              <el-button type="primary">立即付款</el-button>
              <el-button type="text" @click="toDetails(item.id)"
                >查看详情</el-button
              >
              <el-button type="text" @click="oncancel1(item.id)"
                >取消订单</el-button
              >
            </div>
            <div v-else-if="item.orderState == 2">
              <el-button type="text" @click="toDetails(item.id)"
                >查看详情</el-button
              >
              <el-button type="text">再次购买</el-button>
            </div>
            <div v-else-if="item.orderState == 4">
              <el-button type="text" @click="toDetails(item.id)"
                >查看详情</el-button
              >
              <el-button type="text">再次购买</el-button>
              <el-button type="text">申请售后</el-button>
            </div>
            <div v-else>
              <el-button type="text" @click="toDetails(item.id)"
                >查看详情</el-button
              >
            </div>
          </div>
        </div>
      </div>
      <el-dialog
        title="取消订单"
        :visible.sync="dialogVisible"
        width="48%"
        :before-close="handleClose"
      >
        <span>取消订单后，本单享有的优惠可能会一并取消，是否继续？</span>
        <p>请选择取消订单的原因（必选）：</p>
        <span slot="footer" class="dialog-footer">
          <div class="btnBox">
            <el-button
              v-for="(item, index) in tets"
              :key="index"
              @click="onReasons(item)"
              >{{ item }}</el-button
            >
          </div>
          <div class="Submit">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="oncancel">确 定</el-button>
          </div>
        </span>
      </el-dialog>
    </div>
    <div class="noBox" v-else>暂无数据</div>
  </div>
</template>

<script>
import { orderCancel, deleOrder, OrderData } from "@/api/user";
export default {
  name: "orderbodyItem",
  props: ["arr"],
  data() {
    return {
      loading: true,

      listArr: [],
      dialogVisible: false,
      tets: [
        "配送信息有误",
        "商品买错了",
        "重复下单/误下单",
        "忘记使用优惠劵、免币等",
        "其他渠道价格更低",
        "不想要了",
      ],
      tet: null,
      id: null,
    };
  },
  watch: {
    deep: true,
    immediate: true,
    arr(list) {
      console.log("watch监测：", list);
      this.listArr = list;
      // if (this.listArr.length > 0) {
      //    this.loading= false;
      // }else{
      //     this.loading= true;
      // }
    },
  },
  created() {},
  mounted() {},
  methods: {
    // 取消订单弹框
    handleClose(done) {
      console.log(done);
    },
    // 获取取消订单理由
    onReasons(tet) {
      this.tet = tet;
    },
    // 获取取消订单id
    oncancel1(id) {
      this.id = id;
      this.dialogVisible = true;
    },
    // 取消订单
    oncancel() {
      orderCancel(this.id, this.tet).then((res) => {
        console.log(res);
        OrderData().then((res) => {
          console.log(res.data.result.items);
          this.listArr = res.data.result.items;
        });
      });
      this.dialogVisible = false;
    },
    // 订单详情
    toDetails(id) {
      // console.log(this.$store);
      console.log(id);
      this.$store.commit("order/setId", id);
      this.$router.push({ name: "details" });

      // DetailsData(id).then((res) => {
      //   let datas = res.data.result;
      //   console.log(datas);
      //   this.$router.push({ name: "details", params: datas });
      // });
    },
    // 删除订单
    dele(obj) {
      let ids = [];
      obj.forEach((item) => {
        ids.push(item.id);
      });
      console.log(ids);
      deleOrder(ids).then((res) => {
        console.log(res);
        OrderData().then((res) => {
          console.log(res.data.result.items);
          this.listArr = res.data.result.items;
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.centerTop {
  height: 50px;
  line-height: 50px;
  background: #f5f5f5;
  padding: 0 20px;
  overflow: hidden;
  span {
    margin-right: 20px;
  }
  .down-time {
    margin: 0;
    float: right;
    i {
      margin-right: 5px;
    }
    b {
      vertical-align: middle;
      font-weight: 400;
    }
  }
}
.centerBody {
  display: flex;
  margin-top: 0px;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  border-bottom: 1px solid #f5f5f5;
  ul {
    width: 50%;
    border-right: 1px solid #f5f5f5;
    border-left: 1px solid #f5f5f5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    :nth-last-child(1) {
      border: none;
    }
    li {
      width: 100%;
      padding: 10px;
      border-bottom: 1px solid #f5f5f5;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      img {
        width: 50px;
        height: 50px;
        margin: 5px;
      }
      .info {
        width: 220px;
        :nth-child(2) {
          font-size: 12px;
          color: #666;
          margin-top: 6px;
        }
      }
      .moneyBox {
        width: 100px;
        text-align: center;
      }
      .numBox {
        width: 80px;
        text-align: center;
      }
    }
  }
  .column {
    border-right: 1px solid #f5f5f5;
    text-align: center;
    padding-top: 10px;
    font-size: 14px;
    p {
      margin: 10px 0;
    }
  }
  .column.state {
    width: 120px;
  }
  .column.amount {
    width: 200px;
    :nth-child(1) {
      color: red;
    }
  }
  .column.action {
    width: 140px;
    text-align: center;
  }
  .el-button.el-button--text {
    display: block;
    margin-left: 40px;
  }
}
.btnBox {
  width: 100%;
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  .el-dialog {
    width: 50%;
  }
  justify-content: space-evenly;
  .el-button {
    width: 240px;
    height: 60px;
  }
}
.Submit {
  width: 100%;
  text-align: center;
  margin-top: 20px;
  .el-button {
    width: 200px;
  }
}
//无数据div
.noBox {
  width: 100%;
  height: 100vh;
  line-height: 200px;
  text-align: center;
}
</style>